<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    <script>
        var apiUrl = 'http://127.0.0.1:8080/api';
        $(function(){
            var vue = new Vue({
                el: '#view',
                data : {
                    param : {
                        userName : null,
                        currentPage : 0 ,
                        pageSize : 15,
                        sort : 'user_id asc'
                    },
                    list : [],
                    user : {},
                    formTitle : '新增信息'
                },
                methods : {
                    query : function(){
                        var _ths = this;
                        _ths.$http({
                            method:'GET',
                            url : apiUrl+'/user/getUserPage',
                            params : _ths.param
                        }).then(function(response){
                            var result = response.body;
                            if(result.success){
                                _ths.list = result.page.content;
                                console.log(_ths.list);
                            }else{
                                console.log(result.code+result.message);
                            }
                        },function(error){
                            alert(error);
                        });
                    },
                    showForm : function(item){
                        var _ths = this;
                        var message = '新增';
                        if(item){
                            message = '编辑';
                            _ths.user = JSON.parse(JSON.stringify(item));
                        }
                        _ths.formTitle = message+'信息';

                        $("#formData").modal({
                            closeViaDimmer:false
                        });
                        $('#formData').on('closed.modal.amui', function(){
                            _ths.formTitle = '新增信息';
                            _ths.user = {
                            };
                        });
                    },
                    submitForm : function(){
                        var _ths = this;
                        /*$.post(apiUrl+'/user/saveUser',this.user,{
                            headers: {'Content-Type': 'application/json; charset=UTF-8'},
                            transformRequest: function (data) {
                                return $.param(data);
                            }
                        }).then(function(result){
                            if(result.success){
                                alert('成功');
                                $('#formData').modal('close');
                            }else{
                                console.log(result.code+result.message);
                            }
                        });*/

                        _ths.$http({
                            method:'POST',
                            headers: {
                                'Content-Type': 'application/json;charset=UTF-8',
                                'Accept' : 'application/json, text/plain, */*',
                                'X-Requested-With' : 'XMLHttpRequest'
                            },
                            url : apiUrl+'/user/saveUser',
                            params : _ths.user
                        }).then(function(response){
                            var result = response.body;
                            if(result.success){
                                alert('成功');
                                $('#formData').modal('close');
                                _ths.query();
                            }else{
                                console.log(result.code+result.message);
                            }
                        },function(error){
                            alert(error);
                        });

                    }
                },
                filters : {
                    stateToStr : function(userState){
                        if(userState == 0){
                            return '在用';
                        }else if(userState == 1){
                            return '停用';
                        }else{
                            return '假的';
                        }
                    }
                }
            });

            vue.query();
        });
    </script>
</head>
<body >
<div class="admin-content" id="view">
    <div class="admin-content-body">
        <div class="am-cf am-padding am-padding-bottom-0">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">列表页</strong> / <small>Table</small></div>
        </div>

        <hr>

        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-6">
                <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                        <button type="button" class="am-btn am-btn-default" @click="showForm()"><span class="am-icon-plus"></span> 新增</button>
                    </div>
                </div>
            </div>
            <div class="am-u-sm-12 am-u-md-3">
                <div class="am-form-group">

                </div>
            </div>
            <div class="am-u-sm-12 am-u-md-3">
                <div class="am-input-group am-input-group-sm">
                    <input type="text" class="am-form-field" v-model="param.userName">
                    <span class="am-input-group-btn">
            <button class="am-btn am-btn-default" type="button" @click="query()">搜索</button>
          </span>
                </div>
            </div>
        </div>

        <div class="am-g">
            <div class="am-u-sm-12">
                <form class="am-form">
                    <table class="am-table am-table-striped am-table-hover table-main">
                        <thead>
                        <tr>
                            <th class="table-id">序号</th>
                            <th class="table-title">登录名</th>
                            <th class="table-type">用户名</th>
                            <th class="table-author am-hide-sm-only">状态</th>
                            <th class="table-date am-hide-sm-only">注册时间</th>
                            <th class="table-set">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(user,index) in list">
                            <td >{{index+1}}</td>
                            <td >{{user.loginName}}</td>
                            <td >{{user.userName}}</td>
                            <td class="am-hide-sm-only" >{{user.userState|stateToStr}}</td>
                            <td class="am-hide-sm-only" >{{user.foundTime}}</td>
                            <td>
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">
                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary" @click="showForm(user)"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div>

        </div>
    </div>




    <div class="am-popup" id="formData">
        <div class="am-popup-inner">
            <div class="am-popup-hd">
                <h4 class="am-popup-title">{{formTitle}}</h4>
                <span data-am-modal-close
                      class="am-close">&times;</span>
            </div>
            <div class="am-popup-bd">
                <form class="am-form tpl-form-line-form">
                    <div class="am-form-group">
                        <label for="loginName" class="am-u-sm-3 am-form-label">登录名 </label>
                        <div class="am-u-sm-9">
                            <input type="text" id="loginName" class="tpl-form-input"
                                   v-model="user.loginName">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="userName" class="am-u-sm-3 am-form-label">用户名 </label>
                        <div class="am-u-sm-9">
                            <input type="text" id="userName"
                                   class="tpl-form-input" v-model="user.userName" >
                        </div>
                    </div>
                    <div class="am-form-group">
                        <div class="am-u-sm-9 am-u-sm-push-3">

                            <button type="button" class="am-btn am-btn-default am-btn-secondary" @click="submitForm()"><span class="am-icon-save"></span> 保存</button>

                            <button type="button" class="am-btn am-btn-default am-radius" data-am-modal-close><span class="am-icon-close"></span> 取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


</body>
</html>